<template>
    <div class="tree-box-content">
        <!-- <div> -->
        <div class="tree-chart-box">
            <tabChange @clickTab="clickType" :duringTIme="2000" :openCycle="false" :btnTitle="btnTitle" type="small"
                :isRadioButton="true" class="group-tab"></tabChange>
            <vue2-org-tree :data="data" @on-node-click="(e, data) => NodeClick(e, data, '大庆油田')"
                v-if="changeType === '大庆油田'" :renderContent="renderContent" />
            <vue2-org-tree :data="dataSh" @on-node-click="(e, data) => NodeClick(e, data, '大庆石化')"
                :renderContent="renderContent1" class="tree-sh" v-if="changeType === '大庆石化'" />
            <vue2-org-tree :data="dataZt" @on-node-click="(e, data) => NodeClick(e, data, '大庆钻探')"
                :renderContent="renderContent1" class="tree-sh" v-if="changeType === '大庆钻探'" />
            <vue2-org-tree :data="dataLh" @on-node-click="(e, data) => NodeClick(e, data, '大庆炼化')"
                :renderContent="renderContent1" class="tree-sh" v-if="changeType === '大庆炼化'" />
        </div>
        <div class="pie-box-top">
            <div class="pie-box-item">
                <PieBaseChart :dataList="this.dataList1" title="专线业务" />
            </div>
            <div class="pie-box-item">
                <PieBaseChart :dataList="this.dataList2" title="云业务" />
            </div>
            <div class="pie-box-item">
                <PieBaseChart :dataList="this.dataList3" title="无线网业务" />
            </div>
            <div class="pie-box-item">
                <PieBaseChart :dataList="this.dataList4" title="ICT及其它业务" />
            </div>
        </div>
        <div class="top-list top-list-kh">
            <div class="top-item" v-for="item, i in ytList">
                <div class="top-name">
                    <span class="top-num">{{ i + 1 }}</span>
                    <span class="subName" @click="goTable('', item.name)">{{ item.name }}</span>
                    <!-- <span class="name-num">0</span> -->
                </div>
                <div class="num-box" :class="i > 3 && i < 10 ? 'num-box-yellow' : i > 9 ? 'num-box-red' : ''">
                    <div class="second-title">客户拓展</div>
                    <div class="num-border">
                        <div class="num-kh-value">
                            二级单位数 <span class="kh-num"> {{ item.dwsj || 0 }}</span>
                        </div>
                        <div class="num-kh-value">
                            已拓展单位数<span class="kh-num"> {{ item.ytz || 0 }}</span>
                        </div>
                        <div class="num-kh-value">
                            存量项目数 <span class="kh-num"> {{ item.clxm || 0 }}</span>
                        </div>
                        <div class="num-kh-value">
                            新拓展商机数 <span class="kh-num"> {{ item.tzsj || 0 }}</span>
                        </div>
                    </div>
                    <div class="second-title">项目数量</div>
                    <div class="num-border">
                        <div class="num-kh-value">
                            专线业务 <span class="kh-num"> {{ item.zxyw || 0 }}</span>
                        </div>
                        <div class="num-kh-value">
                            云业务 <span class="kh-num"> {{ item.yyw || 0 }}</span>
                        </div>
                        <div class="num-kh-value">
                            5G专网业务 <span class="kh-num"> {{ item.zwyw || 0 }}</span>
                        </div>
                        <div class="num-kh-value">
                            物联网业务 <span class="kh-num"> {{ item.wlwyw || 0 }}</span>
                        </div>
                        <div class="num-kh-value">
                            ICT业务 <span class="kh-num"> {{ item.ictyw || 0 }}</span>
                        </div>
                        <div class="num-kh-value">
                            其他 <span class="kh-num"> {{ item.other || 0 }}</span>
                        </div>
                    </div>
                    <div class="second-title">中标金额（万元）</div>
                    <div class="num-border">
                        <div class="num-kh-value">
                            专线业务 <span class="kh-num"> ￥{{ item.zxywMoney || 0
                            }}</span>
                        </div>
                        <div class="num-kh-value">
                            云业务 <span class="kh-num"> ￥{{ item.yywMoney || 0 }}</span>
                        </div>
                        <div class="num-kh-value">
                            5G专网业务 <span class="kh-num">￥{{ item.zwywMoney || 0
                            }}</span>
                        </div>
                        <div class="num-kh-value">
                            物联网业务 <span class="kh-num"> ￥{{ item.wlwywMoney || 0
                            }}</span>
                        </div>
                        <div class="num-kh-value">
                            ICT业务 <span class="kh-num"> ￥{{ item.ictywMoney || 0
                            }}</span>
                        </div>
                        <div class="num-kh-value">
                            其他 <span class="kh-num"> ￥{{ item.otherMoney || 0
                            }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- <div class="tree-box">
            <img src="@/assets/img/tree.png" class="tree-bg" />
            <div class="name-box" @click="goTable()">
                <div>大庆油田、大庆石化</div>
                <div>大庆炼化、大庆钻探</div>
            </div>
            <div class="left-top-tree">
                <div class="tree-name" @click="goTable('党委办公室')">党委办公室</div>
                <div class="tree-name" @click="goTable('党委组织部（人事部）')">党委组织部（人事部）</div>
                <div class="tree-name" @click="goTable('党委宣传部')">党委宣传部</div>
                <div class="tree-name" @click="goTable('规划计划部')">规划计划部</div>
                <div class="tree-name" @click="goTable('财务资产部')">财务资产部</div>
                <div class="tree-name" @click="goTable('企管法规部')">企管法规部</div>
                <div class="tree-name" @click="goTable('生产运行与信息部')">生产运行与信息部</div>
                <div class="tree-name" @click="goTable('生态资源管理部')">生态资源管理部</div>
                <div class="tree-name" @click="goTable('质量安全环保部')">质量安全环保部</div>
                <div class="tree-name" @click="goTable('物资装备部')">物资装备部</div>
                <div class="tree-name" @click="goTable('技术发展部')">技术发展部</div>
                <div class="tree-name" @click="goTable('纪委办公室、党委巡查工作领导小组办公室')">纪委办公室、党委巡查工作领导小组</div>
            </div>
            <div class="left-bottom-tree">
                <div class="tree-name" @click="goTable('市场开发部')">市场开发部</div>
                <div class="tree-name" @click="goTable('党委办公室')">群团工作部</div>
                <div class="tree-name" @click="goTable('群团工作部')">勘探事业部</div>
                <div class="tree-name" @click="goTable('开发事业部')">开发事业部</div>
                <div class="tree-name" @click="goTable('矿区管理部')">矿区管理部</div>
                <div class="tree-name" @click="goTable('大庆油田发展战略研究中心')">大庆油田发展战略研究中心</div>
                <div class="tree-name" @click="goTable('资金结算中心')">资金结算中心</div>
                <div class="tree-name" @click="goTable('审计部（审计中心）')">审计部（审计中心）</div>
                <div class="tree-name" @click="goTable('造价中心')">造价中心</div>
                <div class="tree-name" @click="goTable('基建管理中心')">基建管理中心</div>
                <div class="tree-name" @click="goTable('稳定工作协调服务中心')">稳定工作协调服务中心</div>
                <div class="tree-name" @click="goTable('离退休职工管理中心')">离退休职工管理中心</div>
                <div class="tree-name" @click="goTable('中国石油大庆职业技能鉴定中心')">中国石油大庆职业技能鉴定中心</div>
            </div>
            <div class="right-top-tree">
                <div class="tree-name" @click="goTable('第一采油厂')">第一采油厂</div>
                <div class="tree-name" @click="goTable('第二采油厂')">第二采油厂</div>
                <div class="tree-name" @click="goTable('第三采油厂')">第三采油厂</div>
                <div class="tree-name" @click="goTable('第四采油厂')">第四采油厂</div>
                <div class="tree-name" @click="goTable('第五采油厂')">第五采油厂</div>
                <div class="tree-name" @click="goTable('第六采油厂')">第六采油厂</div>
                <div class="tree-name" @click="goTable('第七采油厂')">第七采油厂</div>
                <div class="tree-name" @click="goTable('第八采油厂')">第八采油厂</div>
                <div class="tree-name" @click="goTable('第九采油厂')">第九采油厂</div>
                <div class="tree-name" @click="goTable('第十采油厂')">第十采油厂</div>
                <div class="tree-name" @click="goTable('榆树林油田开发有限责任公司')">榆树林油田开发有限责任公司</div>
                <div class="tree-name" @click="goTable('头台油田开发有限责任公司')">头台油田开发有限责任公司</div>
                <div class="tree-name" @click="goTable('呼伦贝尔分公司')">呼伦贝尔分公司</div>
                <div class="tree-name" @click="goTable('庆新油田开发有限责任公司')">庆新油田开发有限责任公司</div>
                <div class="tree-name" @click="goTable('采气分公司（储气库分公司）')">采气分公司（储气库分公司）</div>
                <div class="tree-name" @click="goTable('天然气分公司')">天然气分公司</div>
                <div class="tree-name" @click="goTable('重庆分公司')">重庆分公司</div>
                <div class="tree-name" @click="goTable('储运销售分公司')">储运销售分公司</div>
                <div class="tree-name" @click="goTable('井下作业分公司')">井下作业分公司</div>
                <div class="tree-name" @click="goTable('试油试采分公司')">试油试采分公司</div>
                <div class="tree-name" @click="goTable('测试技术服务分公司')">测试技术服务分公司</div>
                <div class="tree-name" @click="goTable('勘探开发研究院')">勘探开发研究院</div>
                <div class="tree-name" @click="goTable('采油工程研究院')">采油工程研究院</div>
                <div class="tree-name" @click="goTable('国际勘探开发公司')">国际勘探开发公司</div>
                <div class="tree-name" @click="goTable('塔东油气勘探开发有限责任公司')">塔东油气勘探开发有限责任公司</div>
                <div class="tree-name" @click="goTable('消防支队')">消防支队</div>
                <div class="tree-name" @click="goTable('行政事务服务中心')">行政事务服务中心</div>
                <div class="tree-name" @click="goTable('大庆油田档案馆')">大庆油田档案馆</div>
                <div class="tree-name" @click="goTable('保卫中心（综治办、武装部）')">保卫中心（综治办、武装部）</div>
                <div class="tree-name" @click="goTable('质量安全环保监督评价中心')">质量安全环保监督评价中心</div>
            </div>
            <div class="right-bottom-tree">
                <div class="tree-name" @click="goTable('大庆钻探工程公司')">大庆钻探工程公司</div>
                <div class="tree-name" @click="goTable('工程建设有限公司')">工程建设有限公司</div>
                <div class="tree-name" @click="goTable('中国石油集团电能有限公司')">中国石油集团电能有限公司</div>
                <div class="tree-name" @click="goTable('装备制造集团')">装备制造集团</div>
                <div class="tree-name" @click="goTable('化工有限公司')">化工有限公司</div>
                <div class="tree-name" @click="goTable('昆仑集团有限公司')">昆仑集团有限公司</div>
                <div class="tree-name" @click="goTable('文化集团')">文化集团</div>
                <div class="tree-name" @click="goTable('方兴油田开发有限责任公司')">方兴油田开发有限责任公司</div>
                <div class="tree-name" @click="goTable('水务公司')">水务公司</div>
                <div class="tree-name" @click="goTable('信息技术公司')">信息技术公司</div>
                <div class="tree-name" @click="goTable('物资公司')">物资公司</div>
                <div class="tree-name" @click="goTable('国际工程有限公司')">国际工程有限公司</div>
                <div class="tree-name" @click="goTable('中东分公司')">中东分公司</div>
                <div class="tree-name" @click="goTable('工程项目管理有限公司')">工程项目管理有限公司</div>
                <div class="tree-name" @click="goTable('铁人学院')">铁人学院</div>
                <div class="tree-name" @click="goTable('庆南工矿服务公司')">庆南工矿服务公司</div>
                <div class="tree-name" @click="goTable('庆北工矿服务公司')">庆北工矿服务公司</div>
                <div class="tree-name" @click="goTable('热源服务中心')">热源服务中心</div>
                <div class="tree-name" @click="goTable('通勤服务公司')">通勤服务公司</div>
                <div class="tree-name" @click="goTable('生态环境管护公司')">生态环境管护公司</div>
                <div class="tree-name" @click="goTable('保险中心')">保险中心</div>
                <div class="tree-name" @click="goTable('技术监督中心')">技术监督中心</div>
            </div>
            <div class="tree-name tree-three" @click="goTable('人事服务中心')">人事服务中心<div class="line"></div>
            </div>
            <div class="tree-name tree-three" style="left: 253px;" @click="goTable('大庆油田土地监察中心')">大庆油田土地监察中心<div
                    class="line">
                </div>
            </div>
            <div class="tree-name tree-three" style="left: 401px;" @click="goTable('纪检中心')">纪检中心<div class="line"></div>
            </div>
            <div class="pie-box-right">
                <div class="pie-box-item">
                    <PieBaseChart :dataList="this.dataList1" title="专线业务" />
                </div>
                <div class="pie-box-item">
                    <PieBaseChart :dataList="this.dataList2" title="云业务" />
                </div>
                <div class="pie-box-item">
                    <PieBaseChart :dataList="this.dataList3" title="无线网业务" />
                </div>
                <div class="pie-box-item">
                    <PieBaseChart :dataList="this.dataList4" title="ICT及其它业务" />
                </div>
            </div>
        </div> -->
    </div>
</template>
<script>
import tabChange from '@/components/tabChange';
import { title } from '@/settings';
import PieBaseChart from './PieBaseChart'
import treeChart from "./treeChart";
import store from '@/store'
import qs from 'querystring'
export default {
    components: {
        PieBaseChart,
        treeChart,
        tabChange
    },
    data() {
        return {
            changeType: '大庆油田',
            btnTitle: [
                { name: '大庆油田', code: '大庆油田' },
                { name: '大庆石化', code: '大庆石化' },
                { name: '大庆钻探', code: '大庆钻探' },
                { name: '大庆炼化', code: '大庆炼化' },
            ],
            ytList: [
                {
                    name: '大庆油田',
                    dwsj: 52,
                    clxm: 73,
                    tzsj: 17,
                    ytz: 33,
                    zxyw: 32,
                    yyw: 3,
                    zwyw: 5,
                    wlwyw: 28,
                    ictyw: 4,
                    other: 18,
                    zxywMoney: 338.11,
                    yywMoney: 100,
                    zwywMoney: 5006.96,
                    wlwywMoney: 672.21,
                    ictywMoney: 5723.6,
                    otherMoney: 49.88
                },
                {
                    name: '大庆石化',
                    dwsj: 25,
                    clxm: 4,
                    tzsj: 4,
                    ytz: 4,
                    zxyw: 5,
                    yyw: 0,
                    zwyw: 0,
                    wlwyw: 3,
                    ictyw: 0,
                    other: 0,
                    zxywMoney: 5.7,
                    yywMoney: 0,
                    zwywMoney: 0,
                    wlwywMoney: 2.7,
                    ictywMoney: 0,
                    otherMoney: 0
                },
                {
                    name: '大庆钻探',
                    dwsj: 25,
                    clxm: 2,
                    tzsj: 2,
                    ytz: 1,
                    zxyw: 1,
                    yyw: 1,
                    zwyw: 1,
                    wlwyw: 0,
                    ictyw: 1,
                    other: 0,
                    zxywMoney: 47,
                    yywMoney: 0,
                    zwywMoney: 95,
                    wlwywMoney: 0,
                    ictywMoney: 0,
                    otherMoney: 0
                },
                {
                    name: '大庆炼化',
                    dwsj: 20,
                    clxm: 2,
                    tzsj: 3,
                    ytz: 2,
                    zxyw: 0,
                    yyw: 0,
                    zwyw: 1,
                    wlwyw: 2,
                    ictyw: 1,
                    other: 1,
                    zxywMoney: 0,
                    yywMoney: 0,
                    zwywMoney: 0,
                    wlwywMoney: 22.01,
                    ictywMoney: 0,
                    otherMoney: 0
                }
            ],
            data: {
                id: 0,
                label: `大庆油田`,
                value: 90,
                children: [
                    {
                        id: 2,
                        label: "管理部门",
                        children: [
                            {
                                id: 5,
                                label: "党委办公室",
                            },
                            {
                                id: 6,
                                label: "党委组织部",
                                children: [
                                    {
                                        id: 55,
                                        label: "人事服务中心"
                                    }
                                ]
                            },
                            {
                                id: 9,
                                label: "党委宣传部"
                            },
                            {
                                id: 10,
                                label: "规划计划部"
                            },
                            { label: "财务资产部" },
                            { label: "企管法规部" },
                            { label: "生产运行与信息部" },
                            {
                                label: "生态资源管理部", children: [
                                    {
                                        label: "大庆油田土地监察中心"
                                    }
                                ]
                            },
                            { label: "质量安全环保部" },
                            { label: "物资装备部" },
                            { label: "技术发展部" },
                            {
                                label: "纪委办公室、党委巡查工作领导小组办公室", children: [
                                    {
                                        label: "纪检中心"
                                    }
                                ]
                            },
                            { label: "市场开发部" },
                            { label: "群团工作部" },
                            { label: "勘探事业部" },
                            { label: "开发事业部" },
                            { label: "矿区管理部" },
                            { label: "大庆油田发展战略研究中心" },
                            { label: "资金结算中心" },
                            { label: "审计部" },
                            { label: "造价中心" },
                            { label: "基建管理中心" },
                            { label: "稳定工作协调服务中心" },
                            { label: "离退休职工管理中心" },
                            { label: "中国石油大庆职业技能鉴定中心" }
                        ]
                    },
                    {
                        id: 3,
                        label: "二级单位",
                        children: [
                            { label: "第一采油厂", value: 3 },
                            { label: "第二采油厂", value: 2 },
                            { label: "第三采油厂", value: 0 },
                            { label: "第四采油厂", value: 1 },
                            { label: "第五采油厂", value: 4 },
                            { label: "第六采油厂", value: 4 },
                            { label: "第七采油厂", value: 2 },
                            { label: "第八采油厂", value: 2 },
                            { label: "第九采油厂", value: 3 },
                            { label: "第十采油厂", value: 3 },
                            { label: "榆树林油田开发有限责任公司", value: 1 },
                            { label: "头台油田开发有限责任公司", value: 4 },
                            { label: "呼伦贝尔分公司" },
                            { label: "庆新油田开发有限责任公司", value: 1 },
                            { label: "采气分公司", value: 1 },
                            { label: "天然气分公司", value: 4 },
                            { label: "重庆分公司" },
                            { label: "储运销售分公司", value: 2 },
                            { label: "井下作业分公司", value: 4 },
                            { label: "试油试采分公司", value: 3 },
                            { label: "测试技术服务分公司", value: 4 },
                            { label: "勘探开发研究院", value: 2 },
                            { label: "采油工程研究院", value: 2 },
                            { label: "国际勘探开发公司" },
                            { label: "塔东油气勘探开发有限责任公司" },
                            { label: "消防支队", value: 1 },
                            { label: "行政事务服务中心" },
                            { label: "大庆油田档案馆" },
                            { label: "保卫中心" },
                            { label: "质量安全环保监督评价中心" },
                            { label: "大庆钻探工程公司" },
                            { label: "工程建设有限公司", value: 3 },
                            { label: "中国石油集团电能有限公司", value: 5 },
                            { label: "装备制造集团" },
                            { label: "化工有限公司" },
                            { label: "昆仑集团有限公司", value: 1 },
                            { label: "文化集团", value: 3 },
                            { label: "方兴油田开发有限责任公司" },
                            { label: "水务公司", value: 3 },
                            { label: "信息技术公司", value: 6 },
                            { label: "物资公司", value: 1 },
                            { label: "国际工程有限公司", value: 1 },
                            { label: "中东分公司" },
                            { label: "工程项目管理有限公司", value: 1 },
                            { label: "铁人学院", value: 6 },
                            { label: "庆南工矿服务公司" },
                            { label: "庆北工矿服务公司", value: 2 },
                            { label: "热源服务中心" },
                            { label: "通勤服务公司", value: 2 },
                            { label: "生态环境管护公司" },
                            { label: "保险中心", value: 3 },
                            { label: "技术监督中心" }
                        ]
                    }
                ]
            },
            dataSh: {
                id: 0,
                label: `大庆石化`,
                value: '8',
                children: [
                    {
                        id: 2,
                        label: "管理部门",
                        children: [
                            { label: "办公室、党委办公室" },
                            { label: "维护工作稳定办公室" },
                            { label: "人力资源部" },
                            { label: "机关党委", children: [{ label: "社会保障中心" }] },
                            { label: "党群工作部" },
                            { label: "党委宣传部、工会、团委" },
                            { label: "纪委办公室" },
                            { label: "党委巡检办公室" },
                            { label: "财务部" },
                            { label: "生产运行部" },
                            { label: "规划和科技信息部" },
                            { label: "机动设备部" },
                            { label: "质量健康安全环保部", children: [{ label: "安全环保监督中心" }] },
                            { label: "企管法规部" },
                            { label: "审计部" },
                            { label: "工程管理部" },
                            { label: "工程质量监察站" },
                            { label: "工程造价部" }
                        ]
                    },
                    {
                        id: 3,
                        label: "二级单位",
                        children: [
                            { label: "炼油一部", value: 2 },
                            { label: "炼油二部", value: 2 },
                            { label: "化肥部", value: 0 },
                            { label: "乙烯一部", value: 0 },
                            { label: "乙烯二部", value: 0 },
                            { label: "化工一部", value: 0 },
                            { label: "化工二部", value: 2 },
                            { label: "聚烯烃部", value: 2 },
                            { label: "化纤部", value: 0 },
                            { label: "热电部", value: 0 },
                            { label: "炼油储运部", value: 0 },
                            { label: "销售储运中心", value: 0 },
                            { label: "公用工程一部", value: 0 },
                            { label: "公用工程二部", value: 0 },
                            { label: "质量检验中心", value: 0 },
                            { label: "设备维修中心", value: 0 },
                            { label: "化建公司", value: 0 },
                            { label: "机械厂", value: 0 },
                            { label: "检测技术公司", value: 0 },
                            { label: "物资供应中心", value: 0 },
                            { label: "培训中心", value: 0 },
                            { label: "消防支队", value: 0 },
                            { label: "保卫部", value: 0 },
                            { label: "公共事务中心", value: 0 },
                            { label: "客运服务中心", value: 0 }
                        ]
                    }
                ]
            },
            dataLh: {
                id: 0,
                label: `大庆炼化`,
                value: '5',
                children: [
                    {
                        id: 2,
                        label: "管理部门",
                        children: [
                            { label: "纪委办公室" },
                            { label: "党群工作部" },
                            { label: "企管法规部" },
                            { label: "规划和科技信息部" },
                            { label: "机动设备部" },
                            { label: "质量健康安全环保部" },
                            { label: "生产运行部" },
                            { label: "财务部" },
                            { label: "计划经营部" },
                            { label: "人力资源部\党委组织部", children: [{ label: "社会保险中心" }] },
                            { label: "办公室/党委办公室", haveChildren1: true, children: [{ label: "行政事务中心" }, { label: "档案管理中心" }] },
                            { label: "物资采购部" },
                            { label: "工程管理部" },
                            { label: "安全环保监督中心" },
                        ]
                    },
                    {
                        id: 3,
                        label: "二级单位",
                        children: [
                            { label: "炼油一部", value: 0 },
                            { label: "炼油二部", value: 0 },
                            { label: "炼油三部" },
                            { label: "化工一部" },
                            { label: "化工二部" },
                            { label: "化工三部" },
                            { label: "化工四部" },
                            { label: "化工有限公司" },
                            { label: "储运部" },
                            { label: "公用工程部" },
                            { label: "电议运行中心", value: 4 },
                            { label: "检维修中心" },
                            { label: "质量检验中心" },
                            { label: "营销调运部" },
                            { label: "研究院" },
                            { label: "信息中心", value: 1 },
                            { label: "公共事务中心" },
                            { label: "保卫部" },
                            { label: "车辆管理中心" },
                            { label: "培训中心" }
                        ]
                    }
                ]
            },
            dataZt: {
                id: 0,
                label: `大庆钻探`,
                value: '4',
                children: [
                    {
                        id: 2,
                        label: "管理部门",
                        children: [
                            { label: "党委办公室" },
                            { label: "党委组织部" },
                            { label: "党群工作部" },
                            { label: "党群工作部" },
                            { label: "财务部" },
                            { label: "物资设备部" },
                            { label: "纪委办公室" },
                            { label: "质量健康安全环保部" },
                            { label: "西部钻井公司", haveChildren: true, children: [{ label: "安全协调保障部" }, { label: "生产运行管理科" }] },
                            {
                                label: "吉林石油工程事业部",
                                children: [
                                    { label: "技术管理科" },
                                    { label: "质量监督科" },
                                    { label: "钻井信息科" },
                                    { label: "井控管理科" },
                                    { label: "科研管理科" },
                                    { label: "网络与应用管理科" }
                                ]
                            },
                        ]
                    },
                    {
                        id: 3,
                        label: "二级单位",
                        children: [
                            { label: "钻井一公司", value: 0 },
                            { label: "钻井液公司", value: 0 },
                            { label: "运行保障公司" },
                            { label: "质量安全环保监督检测公司" },
                            { label: "钻井二公司" },
                            { label: "固井公司" },
                            { label: "综合服务公司" },
                            { label: "定向井公司" },
                            { label: "机械修理厂" },
                            { label: "钻井工程技术研究院" },
                            { label: "国际事业部" },
                            { label: "地质录井公司", value: 4 },
                            { label: "油气资源开发技术服务" },
                            { label: "剩余油挖潜技术服务" },
                            { label: "页岩油钻井工程项目经理部" },
                            { label: "致密气项目经理部" },
                            { label: "川渝钻探项目经理部" },
                            { label: "陕晋钻探项目经理部" },
                            { label: "新疆钻探项目经理部" },
                            { label: "海坝总承包项目经理部" },
                            { label: "井下作业工程公司" },
                            { label: "钻井四公司" },
                            { label: "试油测试公司" },
                            { label: "西部钻井公司" },
                            { label: "吉林石油工程事业部" },
                        ]
                    }
                ]
            },
            loginCode: '',
            dataList1: [
                { value: 20, name: '移动' },
                { value: 8, name: '联通' },
                { value: 12, name: '电信' },
                { value: 60, name: '油田信息' }
            ],
            dataList2: [
                { value: 7, name: '移动' },
                { value: 3, name: '联通' },
                { value: 5, name: '电信' },
                { value: 80, name: '油田信息' },
                { value: 5, name: '其它' }
            ],
            dataList3: [
                { value: 64.5, name: '移动' },
                { value: 19.4, name: '联通' },
                { value: 16.1, name: '电信' },
            ],
            dataList4: [
                { value: 8.2, name: '移动' },
                { value: 4.7, name: '联通' },
                { value: 2.3, name: '电信' },
                { value: 83.8, name: '油田信息' },
                { value: 1, name: '其它' }
            ]
        }
    },
    mounted() {
    },
    methods: {
        clickType(type) {
            this.changeType = type
        },
        renderContent(h, data) {
            return h('div', {
                class: {
                    'firstName': data.label == '大庆油田' || data.label == '大庆石化' || data.label == '大庆炼化' || data.label == '大庆钻探',
                    'secondName': data.label == '管理部门' || data.label == '二级单位',
                    'otherName': data.label != '管理部门' && data.label != '二级单位' && data.label != '大庆油田',
                    'lastName': data.label == '纪检中心',
                    'otherNameNoNum': !data.value && data.label != '管理部门' && data.label != '二级单位' && data.label != '大庆油田',
                },
            },
                [h('span', {
                    attrs: {
                        title: data.label
                    }
                },
                    data.label
                ), h('div', {
                    class: {
                        'treeNum': data.value && data.value > 0,
                        'treeRedNum': !data.value,
                    },
                    attrs: {
                        title: data.label
                    }
                },
                    data.label != '管理部门' && data.label != '二级单位' ? data.value || 0 : ''
                )]);
        },
        renderContent1(h, data) {
            let isTitle = data.label == '大庆油田' || data.label == '大庆石化' || data.label == '大庆炼化' || data.label == '大庆钻探'
            return h('div', {
                class: {
                    'firstName': isTitle,
                    'secondName': data.label == '管理部门' || data.label == '二级单位',
                    'otherName': data.label != '管理部门' && data.label != '二级单位' && !isTitle,
                    'lastName': data.label == '纪检中心',
                    'otherNameNoNum': !data.value && data.label != '管理部门' && data.label != '二级单位' && data.label != '大庆油田',
                    'haveChildrenTree': data.haveChildren,
                    'haveChildrenTree1': data.haveChildren1
                },
            },
                [h('span', {
                    class: !isTitle && 'tree-text',
                    attrs: {
                        title: data.label
                    }
                },
                    data.label
                ), h('span', {
                    class: {
                        'treeNum': data.value && data.value > 0,
                        'treeRedNum': !data.value,
                    },
                    attrs: {
                        title: data.label
                    }
                },
                    data.label != '管理部门' && data.label != '二级单位' ? data.value || 0 : ''
                )]);
        },
        //点击节点
        NodeClick(e, data, customerBelonging) {
            if (data.label !== '管理部门' && data.label !== '二级单位') {
                this.goTable(data.label == '大庆油田' || data.label == '大庆石化' || data.label == '大庆炼化' || data.label == '大庆钻探' ? '' : data.label, customerBelonging)
            }
        },
        goTable(customerName, customerBelonging) {
            let loginCode = store.getters.loginCode
            // this.$router.push({ path: '/dqytList', query: { customerName, loginCode: loginCode, customerBelonging } });
            let params = { customerName, loginCode: loginCode, customerBelonging, type: '37' }
            window.open(`/#/tokenLogin?${qs.stringify(params)}`)
        },
        numberFormatter(num, digits) {
            const si = [
                { value: 1E8, symbol: '亿元' },
                { value: 1E4, symbol: '万元' },
                { value: 1, symbol: '元' },
            ]
            for (let i = 0; i < si.length; i++) {
                if (num >= si[i].value) {
                    return (num / si[i].value).toFixed(digits).replace(/\.0+$|(\.[0-9]*[1-9])0+$/, '$1') + si[i].symbol
                }
            }
            return num.toString()
        }
    }
}
</script>
<style lang="scss" scoped>
.group-tab {
    position: absolute;
    left: 10px;
    width: auto;
    z-index: 999;
    margin-top: 0;
    top: 10px;
}

.tree-box {
    position: relative;
    width: 100%;
    height: 100%;
    top: 80px;
}

.tree-bg {
    margin-top: 180px;
    width: 1555px;
    height: 247px;
}

.name-box {
    width: 234px;
    text-align: center;
    background: #2196f3;
    color: #fff;
    padding: 5px;
    font-weight: bold;
    border-radius: 7px;
    position: absolute;
    top: 275px;
    left: 662px;
    line-height: 22px;
    cursor: pointer;
    border: 2px solid #000;
    animation: blink-and-change-color 1.5s infinite linear;

    &:hover {
        background: rgb(55, 55, 241);
    }
}

.left-top-tree {
    position: absolute;
    top: 44px;
    left: -6px;
}

.tree-name {
    width: 30px;
    background: #0288d1;
    float: left;
    color: #fff;
    text-align: center;
    margin-left: 7px;
    border-radius: 4px;
    height: 140px;
    font-size: 13px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    border: 2px solid #000;
    animation: blink-and-change-color 1.5s infinite linear;

    &:hover {
        background: rgb(55, 55, 241)
    }
}

/* 定义名为blink-and-change-color的动画关键帧 */
@keyframes blink-and-change-color {

    /* 动画开始时的状态，文字完全显示，颜色为红色 */
    0% {
        opacity: 1;
        border-color: yellow;
    }

    /* 动画进行到50%时的状态，文字完全隐藏，颜色为蓝色 */
    50% {
        opacity: 1;
        border-color: transparent;
    }

    100% {
        opacity: 1;
        border-color: rgb(255, 255, 0);
    }

    // /* 动画结束时的状态，文字完全显示，颜色为红色 */
    // 100% {
    //     opacity: 1;
    //     background: #0288d1;
    // }
}

.left-bottom-tree {
    position: absolute;
    top: 424px;
    left: 122px;
}

.right-top-tree {
    position: absolute;
    top: 44px;
    left: 450px;
}

.right-bottom-tree {
    position: absolute;
    top: 424px;
    left: 615px;
}

.tree-three {
    position: absolute;
    top: -63px;
    left: 31px;
    height: 100px;
}

.line {
    height: 10px;
    width: 1px;
    background: #000;
    position: absolute;
    bottom: -10px;
    left: 13px;
}

.pie-box-right {
    width: 100%;
    position: absolute;
    right: 0;
    top: -100px;

    .pie-box-item {
        width: 300px;
        height: 170px;
    }
}

.pie-box-top {
    width: 100%;
    height: 190px;
    margin-bottom: 16px;
    background: #fff;
    display: flex;

    .pie-box-item {
        width: 20%;
        height: 190px;
        margin: 0 2%
    }
}

.tree-chart-box {
    width: 100%;
    position: relative;
    text-align: center;
    background: #fff;
    margin-bottom: 16px;
    min-height: 590px;
}

.tree-box-content {
    position: relative;
    width: 100%;
    // background: #fff;
    margin-top: 20px;

    .pie-box-right {
        width: 400px;
        top: 0;
        right: 40px;

        .pie-box-item {
            width: 400px;
            height: 200px;
        }
    }
}

.top-num {
    color: #fff;
    background: #0b82ff;
    border-radius: 100px;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    margin: 9px 5px 9px 10px;
    font-size: 14px;
    display: inline-block;
    font-weight: 500;
}

.top-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-direction: column;
    height: 190px;
    background: #fff;
    margin-top: 16px;

    .top-item {
        width: 13.5%;

        .top-name {
            width: 100%;
            text-align: center;
            height: 35px;
            line-height: 35px;
            background: #f0f7fd;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            // justify-content: center;
            font-size: 15px;
            font-weight: bold;
            position: relative;

            .name-num {
                font-size: 20px;
                color: #0b82ff;
            }
        }

        .num-box {
            width: 100%;
            display: flex;
            background: #e4f2fd;
            padding: 16px 12px;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        .num-border {
            width: 100%;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            // border-bottom: 1px dashed #ccc;
            padding-bottom: 6px;
            margin-bottom: 6px;
            border-radius: 5px;
            background: rgba(255, 255, 255, 0.9);
            padding: 5px 16px;
            margin-top: 4px;
        }

        .top-name-yellow {
            background: #fdf7f0;

            .name-num {
                color: #f89626;
            }

            .top-num {
                background: #f89626;
            }
        }

        .num-box-yellow {
            background: #fcedc1;
        }

        .top-name-red {
            background: #fdf0f0e6;

            .name-num {
                color: #fb3d32;
            }

            .top-num {
                background: #fb3d32;
            }
        }

        .num-box-red {
            background: #fcc6c1bf;
        }
    }
}

.hover-value {
    cursor: pointer;

    &:hover {
        // color: #0b82ff;
    }
}

.top-list-kh {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    flex-direction: row;
    padding: 16px;
    height: auto;

    .top-item {
        width: 24.4%;

        .top-name {
            cursor: pointer;

            .subName {
                cursor: pointer;
                font-size: 16px;

                &:hover {
                    color: #0b82ff;
                }
            }

            .name-num {
                position: absolute;
                right: 7px;

                &:hover {
                    // text-decoration: underline;
                }
            }


        }

        .num-box {
            line-height: 22px;
            padding: 6px 14px;
            // cursor: pointer;

            .kh-num {
                width: 50%;
                text-align: right;
                display: inline-block;
                position: absolute;
                right: 0;
                font-weight: bold;
            }

            .num-kh-value {
                width: 47%;
                position: relative;
                font-size: 14px;
                line-height: 26px;

                &:hover {
                    // color: #0b82ff;
                }
            }

        }
    }
}

.line {
    width: 100%;
    margin: 5px 0;
    height: 1px;
    border-bottom: 2px solid #ccc;
}

.second-title {
    margin-bottom: 2px;
    font-size: 15px;
    margin-left: 5px;
    font-weight: bold;
    color: #333;
}
</style>